<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>支付订单</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content>.mui-table-view:first-child {
				margin-top: 1.2rem;
			}
			
			.hotel-header {
				color: #e61874;
				background: #fff;
			}
			
			.mui-title,
			.hotel-header .mui-icon {
				color: #e61874;
			}
			
			.mui-bar {
				height: 6.4rem;
			}
			
			.hotel-room,
			.hotel-price,
			.hotel-reduce {
				display: flex;
				justify-content: space-between;
			}
			
			.hotel-head {
				/*text-align: right;*/
			}
			
			.hotel-head .order_No {
				font-size: 1.4rem;
				/*color: #666;*/
				color: #999;
			}
			
			.hotel-room span {
				font-size: 1.4rem;
				color: #999;
			}
			
			.hotel-room .favorable {
				font-size: 1.2rem;
				color: #e61874;
				padding-left: 0.6rem;
			}
			
			.hotel-price {
				padding: 2.1rem 0 1.2rem;
			}
			
			.pre-price {
				font-size: 1.8rem;
				color: #e61874;
			}
			
			.hotel-reduce {
				padding-bottom: 1.5rem;
			}
			
			.hotel-cash {
				text-align: right;
			}
			
			.hotel-other {
				font-size: 0;
				text-align: right;
				padding-top: 3rem;
			}
			
			.hotel-other .tel {
				margin-right: 3rem;
			}
			
			.hotel-other a span {
				font-size: 1.6rem;
				color: #333;
				padding-left: 0.9rem;
			}
			
			.mui-table-view {
				margin: 1.2rem;
				padding: 1.5rem 1.2rem;
				border-radius: 0.4rem;
			}
			
			.mui-table-view:before,
			.mui-table-view:after,
			.mui-table-view-cell:before,
			.mui-table-view-cell:after,
			.mui-input-group:before,
			.mui-input-group:after,
			.mui-input-group .mui-input-row:after {
				background-color: transparent;
			}
			
			.navbar ul {
				display: flex;
				justify-content: space-around;
				background-color: #fff;
			}
			
			.navbar li {
				position: relative;
				padding: 1rem 0;
			}
			
			.navbar li.active {
				font-size: 1.8rem;
				color: #e61874;
			}
			
			.navbar li.active:after {
				position: absolute;
				width: 100%;
				height: 2px;
				content: '';
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				background-color: #e61874;
				border-radius: 2px;
			}
			
			.font10 {
				font-size: 1rem;
			}
			
			.font14 {
				font-size: 1.4rem;
				color: #999;
			}
			
			.font16 {
				font-size: 1.6rem;
				color: #333;
			}
			
			.icon {
				vertical-align: top;
			}
			
			.hotel-name {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
			}
			
			.hotel-name div {
				position: relative;
				font-size: 1.6rem;
				padding: 0 0 1.5rem;
			}
			
			.hotel-name div:after {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
				height: 2px;
				content: '';
				background-color: #e61874;
				border-radius: 2px;
			}
			
			.data-wrap {
				display: flex;
				align-items: center;
				justify-content: space-around;
				font-size: 0;
				text-align: center;
			}
			
			.data-item {
				font-size: 1.4rem;
			}
			
			.data-stay {
				font-size: 1.2rem;
				display: inline-block;
				min-width: 6rem;
				height: 1.8rem;
				line-height: 1.6rem;
				text-align: center;
				border: 1px solid #e61874;
				border-radius: 1.8rem;
			}
			
			.tip {
				display: inline-block;
				font-size: 1.2rem;
				line-height: 1.6rem;
				color: #999;
				padding: 1.5rem 1.2rem;
			}
			
			p {
				font-size: 1.4rem;
				color: #666;
				padding-left: 1.2rem;
				padding-bottom: 5.4rem;
			}
			
			.mui-input-group {
				position: relative;
				background-color: #fff;
				border: 0;
				padding: 1.5rem 0.4rem 1.5rem 2.4rem;
			}
			
			.mui-input-group .mui-input-row {
				height: auto;
				padding-bottom: 1rem;
			}
			
			.mui-input-group .mui-input-row:last-child {
				padding-bottom: 0;
			}
			
			.mui-checkbox input[type=checkbox]:checked:before,
			.mui-radio input[type=radio]:checked:before {
				color: #e61874;
			}
			
			.mui-checkbox label,
			.mui-radio label {
				font-size: 1.6rem;
				color: #333;
			}
			
			.pay-method {
				font-size: 0;
				background-color: #fff;
			}
			
			.pay-item a {
				/*padding: 0.75rem 0 0.75rem 1.2rem !important;*/
			}
			
			.pay-item a {
				font-size: 1.6rem;
				color: #333;
				padding-left: 1.2rem;
			}
			
			.pay-item a img {
				margin-right: 1.2rem;
				vertical-align: middle;
			}
			
			.pay-style {
				display: flex;
				align-items: center;
			}
			
			.mui-table-view-radio .mui-table-view-cell .mui-navigate-right:after {
				color: #e61874;
			}
			
			.foot {
				position: fixed;
				display: flex;
				align-items: center;
				bottom: 0;
				height: 5.4rem;
				line-height: 5.4rem;
				width: 100%;
				background-color: #fff;
				padding: 0 1.2rem;
				border-top: 1px solid #e0e0e0;
			}
			
			.foot span {
				display: inline-block;
				width: 100%;
				height: 4.2rem;
				line-height: 4.2rem;
				font-size: 1.6rem;
				text-align: center;
				color: #fff;
				background-color: #e61874;
				border-radius: 0.4rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">支付订单</h1>
		</header>
		<div class="mui-content">
			<!-- 订单--开始 -->
			<ul class="mui-table-view" id="order">
				<li class="hotel-name">
					<div style="color: #e61874;">深圳雅商会馆</div>
				</li>
				<li class="mui-table-view-cell" style="padding: 1.5rem 0;">
					<div class="mui-table-view-cell__bd data-wrap">
						<span class="data-item"><span class="font10">入住</span>&nbsp;-&nbsp;<span>04月07日</span></span>
						<span class="data-stay">共1晚</span>
						<span class="data-item"><span class="font10">离店</span>&nbsp;-&nbsp;<span>04月08日</span></span>
					</div>
				</li>
				<li class="hotel-room">
					<span class="font14">标准单人间<!--<span class="favorable">最优惠</span>--></span>
					<span class="font14">含单早</span>
				</li>
				<li class="hotel-price">
					<span class="font16">金额</span>
					<span class="pre-price">￥278</span>
				</li>
				<li class="hotel-reduce">
					<span class="font14">￥278-10=268</span>
					<span class="font14">立减￥10</span>
				</li>
				<li class="hotel-head">
					<span class="order_No">订单编号：123456789</span>
				</li>
			</ul>
			<!-- 订单--结束 -->

			<!-- 提示 -->
			<!--<span class="tip" style="padding-top: 0.15rem;">还需支付<span style="color: #e61874;">￥268</span>请选择支付方式</span>-->

			<!-- 支付方式--开始 -->
			<div class="pay-method">
				<ul class="mui-table-view-radio">
					<li id="wxpay" class="mui-table-view-cell pay-item">
						<a class="mui-navigate-right">
							<img width="27" src="../styles/images/order/pic_weixin.png@2x.png" /> 微信支付
						</a>
					</li>
					<li id="alipay" class="mui-table-view-cell pay-item mui-selected">
						<a class="mui-navigate-right">
							<img width="27" src="../styles/images/order/pic_zhifubao.png@2x.png" /> 支付宝支付
						</a>
					</li>
					<li id="unionpay" class="mui-table-view-cell pay-item">
						<a class="mui-navigate-right">
							<img width="30" src="../styles/images/order/pic_yinlian.png@2x.png" /> 银联支付
						</a>
					</li>
				</ul>
			</div>
			<!-- 支付方式--结束 -->
			<span class="tip">预付规则：预订此产品，需要您预付全额房费。订单一经确认，不可变更/取消。未如约入住，房费将不予退还。</span>
			<p>如预订未成功，所付房费将原路退还至付款账户</p>
		</div>
		<div class="foot">
			<span>去支付</span>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script type="text/javascript">
			mui.init({
				// 预加载酒店详情页
				preloadPages: [{
					id: 'confirm-pay.html',
					url: 'confirm-pay.html'
				}],
				swipeBack: true //启用右滑关闭功能
			});
			
			var tData = JSON.parse(localStorage.getItem('data')); // 从缓存里获取有关时间的数据
			console.log(JSON.stringify(data));
			var order = document.getElementById("order");
			var data;
			var sTime = []; // 入住日期
			var eTime = []; // 离店日期
			var orderid; // 订单编号
			var price; // 原价
			var cashback; // 立减金额
			var itemBed; // 房间类型
			var breakfast; // 是否含早
			var totalamount; // 最后支付金额
			var datanum;
			// 从填写订单页传过来的参数
			window.addEventListener('poID', function(event) {
				data = event.detail.payOrderData; // 从填写订单页传过来的信息
				console.log(JSON.stringify("支付订单页" + data));
				datanum = event.detail.datanum; // 住几晚
				orderid = data.orderid; // 订单id
				price = event.detail.price; // 原价
				cashback = event.detail.cashback; // 立减金额
				itemBed = event.detail.itemBed; // 房间类型
				breakfast = event.detail.breakfast; // 是否含早
				totalamount = event.detail.totalamount; // 最终支付金额
				//获得事件参数
				var html = '';
				sTime = data.checkindate.split("-");
				eTime = data.checkoutdate.split("-");
				html += '<li class="hotel-name">';
				html += '<div style="color: #e61874;">' + data.hotelchnname + '</div></li>';
				html += '<li class="mui-table-view-cell" style="padding: 15px 0;">';
				html += '<div class="mui-table-view-cell__bd data-wrap">';
				html += '<span class="data-item"><span class="font10">入住</span>&nbsp;-&nbsp;<span>' + sTime[1] + '月' + sTime[2] + '日</span></span>';
				html += '<span class="data-stay">共' + datanum + '晚</span>';
				html += '<span class="data-item"><span class="font10">离店</span>&nbsp;-&nbsp;<span>' + eTime[1] + '月' + eTime[2] + '日</span></span>';
				html += '</div></li>';
				html += '<li class="hotel-room">';
				html += '<span class="font14">' + itemBed + '</span>';
				html += '<span class="font14">' + breakfast + '</span></li>';
				html += '<li class="hotel-price">';
				html += '<span class="font16">金额</span><span class="pre-price">￥' + data.totalamount + '</span></li>';
				html += '<li class="hotel-reduce">';
				html += '<span class="font14">￥' + price + '-' + cashback + '=' + totalamount + '</span>';
				html += '<span class="font14">立减￥' + cashback + '</span></li>';
				html += '<li class="hotel-head">';
				html += '<span class="order_No">订单编号：' + orderid + '</span></li>';

				order.innerHTML = html;
			});

			// 去支付的时候传订单号和标识
			var payMethod = document.getElementsByClassName("mui-selected")[0].innerText; // 支付方式文本
			var methodid = document.getElementsByClassName("mui-selected")[0].getAttribute('id'); // 支付方式id
			document.querySelector('.mui-table-view-radio').addEventListener('selected', function(e) {
				payMethod = e.detail.el.innerText;
				methodid = e.target.getAttribute('id')
			});
			if(payMethod == "微信支付") {
				payMethod = "微信安全支付";
			}
//			console.log(payMethod);

			// 向酒店详情页传值
			var conFirmPayPage = null;
			// 添加列表项的点击事件
			mui('body').on('tap', '.foot', function(event) {
				var hotelid = this.getAttribute('id');
				// 获得酒店详情页
				if(!conFirmPayPage) {
					conFirmPayPage = plus.webview.getWebviewById('confirm-pay.html');
				}
				// 触发详情页的cpID事件
				mui.fire(conFirmPayPage, 'cpID', {
					orderid: orderid, // 订单id
					methodid: methodid, // 支付方式id
					payMethod: payMethod, // 支付方式文本
					totalamount: totalamount // 最终支付金额
				});
				// 打开酒店详情页面
				mui.openWindow({
					id: 'confirm-pay.html',
					show: {
						autoShow: true
					}
				});
			});
		</script>
	</body>

</html>